<template>
	<div id="bigScreenBodyDiv" class="bigScreenBodyDiv">
		<div class="bigScreenHeader">
			<div :style="TitleBackground"
				style="width: 100%; height: 100%; background-size: 100% 100%; display: flex; align-items: center;">
				<div class="nav-menu" style="flex: 1;width: 420px; align-items: center; justify-content: center;">

					<router-link to="/CarScreen" class="nav-item"
						:class="{ 'active-nav': $route.path === '/CarScreen' }"
						style="text-decoration: none; color: #fff; margin-left: 110px; padding:  20px; transition: all 0.2s ease;">车辆监控</router-link>

					<router-link to="/CompanyScreen" class="nav-item"
						:class="{ 'active-nav': $route.path === '/CompanyScreen' }"
						style="text-decoration: none; color: #fff; padding:  20px; transition: all 0.2s ease;">企业监控</router-link>

				</div>
				<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center;">
					<p style="font-size: 1.5vw; color: #ffffff;">昌吉回族自治州机动车监管平台</p>
				</div>
				<div style="height: 100%;flex: 1; display: flex; justify-content: flex-end;">
					<router-link to="/TongjiScreen" class="nav-item"
						:class="{ 'active-nav': $route.path === '/TongjiScreen' || $route.path === '/TongjiScreenQushi' }"
						style="text-decoration: none; color: #fff; padding:  20px; transition: all 0.2s ease;">统计分析</router-link>

					<router-link to="/PaiFangScreen" class="nav-item"
						:class="{ 'active-nav': $route.path === '/PaiFangScreen' }"
						style="text-decoration: none; color: #fff; padding:  20px; margin-right: 200px; transition: all 0.2s ease;">排放态势</router-link>

					<div @click="handleClick" style="cursor: pointer;">
						<el-image :src="sclose"
							style="width: 27px; height:27px ;margin-top: 10px; margin-right: 10px"></el-image>
						<div style="color: white; font-size: 10px;	text-align: left;">退出</div>
					</div>
				</div>
			</div>

		</div>
		<div class="bigScreenBodyDivMain">
			<div id="" style="width: 100%;height: 100%;">
				<div class="home_div" style=" display: flex;">
					<div class="map_left" style="width: 34%; background: rgb(0, 21, 40);
    box-shadow: rgba(39, 98, 136, 0.74) 0px 0px 1.77083vw inset;">
						<div id="year-actual">
							<div class="group group1">
								<div class="title" style="margin-left: 10px;">
									上月排放总量
								</div>
								<div class="list">
									<div class="item" v-for="(item, index) in monthList" :key="index">
										<div class="name">
											<span>{{ 11 }}(吨)</span>
											<span>{{ (item.num) + "%" }}</span>
										</div>
										<div class="wave">
											<i :class="item.datas > 0 ? 'icolor1' : 'icolor2'"></i>
											<span>
												{{ (item.datas) }}
												<small>%</small>
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="group group2">
								<div class="title">
									当年排放总量
								</div>
								<div class="list">
									<div class="item" v-for="(item, index) in yearList" :key="index">
										<div class="num">
											{{ (item.num) }}
										</div>
										<div class="name">
											{{ item.name }}(吨)
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div id="container" style="width: 38%;">

					</div>
					<div class="map_right"
						style=" width: 32%;  background: rgb(0, 21, 40);box-shadow: rgba(39, 98, 136, 0.74) 0px 0px 1.77083vw inset;">
						<div>
							<div class="actual-right">
								<div class="one">
									<div class="title">
										<span>{{ pfqd1.title }}</span>
									</div>
									<div class="list">
										<div class="item" v-for="(item, index) in pfqd1.list" :key="index">
											<div :class="item.istop ? 'top-triangle' : 'btm-triangle'"></div>
											<div class="num">{{ (item.num) }}<span>kg</span></div>
											<div class="text nox">{{ item.name }}</div>
										</div>
									</div>
								</div>
								<div class="one">
									<div class="title">
										<span>{{ pfqd2.title }}</span>
									</div>
									<div class="list">
										<div class="item" v-for="(item, index) in pfqd2.list" :key="index">
											<div :class="item.istop ? 'top-triangle' : 'btm-triangle'"></div>
											<div class="num">{{ (item.num) }}<span>kg</span></div>
											<div class="text nox">{{ item.name }}</div>
										</div>
									</div>
								</div>
								<div class="two">
									<LinePage :LinePageDate="LinePageDate" titleText="近七天日排放量(吨)" titleColor="#e9eef3"
										:titleSize="22" :textUnit="textUnit" :Name="Name">
									</LinePage>
								</div>
								<div class="three">
									<div class="title">排放热点区</div>
									<div class="pro-list">
										<div class="pro-item" v-for="(item, key) in ranks" :key="key">
											<div class="pro-label">
												<div class="ranking">{{ key + 1 }}</div>
												<span>{{ TJRegions[item.name] }}</span>
											</div>
											<div class="pro">
												<el-progress :percentage="percentage(ranks[0].value, item.value)"
													:type="pro1.type" :stroke-width="pro1.strokeWidth"
													:color="pro1.color" :show-text="false"></el-progress>
											</div>
											<div class="num">
												<span>{{ item.value }}</span>
												<span>吨</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>




<script>
import areaData from './f.json'; // 导入同一目录下的 JSON 文件
import { logout } from "@/api/login";
import { getToken, removeToken } from '@/utils/auth'
import LinePage from "@/components/Myecharts/LinePage";

import ScreenFull from '@/components/Screenfull/index.vue';
import companyDialog from '@/components/companyDialog/companyDialog.vue';
import moment from "moment";
import * as echarts from 'echarts';
import { Tile as TileLayer } from 'ol/layer'
import XYZ from "ol/source/XYZ";

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import LayerGroup from 'ol/layer/Group';

import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';


import {
	getComDataTotalAndPer,
	getAreaInlineData,
	getWeekData,
	getReportDataAndTop,
	getStageData,
	getWarningCarData,
	getWarningComData,
	getMapComData,
} from '@/api/hzMJPT/mainInterface.js';

export default {
	components: {
		ScreenFull,
		companyDialog,
		LinePage
	},
	inject: ['reload'],
	data() {

		return {
			Name: ["NOX", "PM2.5", "VOCs", "SO₂"],


			LinePageDate: {
				lpweek: [111],
				nox: [222],
				pm25: [333],
				vocs: [44],
				so2: [555],
			},
			ranks: [],

			textUnit: ["(吨)"],
			pfqd2: {
				title: "上一小时排放强度",
				list: [
					{
						name: "NOX",
						istop: false,
						num: "",
					},
					{
						name: "PM2.5",
						istop: false,
						num: "",
					},
					{
						name: "VOCs",
						istop: false,
						num: "",
					},
					{
						name: "SO₂",
						istop: true,
						num: "",
					},
				],
			},
			pfqd1: {
				title: "实时排放强度",
				list: [
					{
						name: "NOX",
						istop: true,
						num: "1",
					},
					{
						name: "PM2.5",
						istop: false,
						num: "2",
					},
					{
						name: "VOCs",
						istop: false,
						num: "3.1",
					},
					{
						name: "SO₂",
						istop: false,
						num: "2.3",
					},
				],
			},
			monthList: [
				{
					name: 'NOX',
					num: '12',
					datas: '',
				},
				{
					name: 'PM2.5',
					num: '10',
					datas: '',
				},
				{
					name: 'VOCs',
					num: '43',
					datas: '',
				},
				{
					name: 'SO₂',
					num: '11',
					datas: '',
				},
				{
					name: 'CO',
					num: '39',
					datas: '',
				},
				{
					name: '总碳',
					num: '70',
					datas: '',
				},
			],
			yearList: [
				{
					name: 'NOX',
					num: '121',
				},
				{
					name: 'PM2.5',
					num: '133',
				},
				{
					name: 'VOCs',
					num: '34',
				},
				{
					name: 'SO₂',
					num: '323',
				},
				{
					name: 'CO',
					num: '123',
				},
				{
					name: '总碳',
					num: '564',
				},
			],
			subCentusTime: '',
			currTab: "1",
			dataTableListJCJL: [],
			sclose: require("@/assets/image/close.png"),
			iconDevice: require("@/assets/icons/dianwei-1-qingdu.png"),
			plusIcon: require("@/assets/image/plus-square.png"),
			minusIcon: require("@/assets/image/plus-square.png"),
			TitleBackground: {
				backgroundImage: 'url(' + require('@/assets/image/title2.png') + ')'
			},
			BodyBackground: {
				backgroundImage: 'url(' + require('@/assets/image/background1-2.jpg') + ')'
			},
			defaultProps: {
				children: 'children',
				label: 'name',
				count: 'count'
			},
			imageURL: "http://t0.tianditu.gov.cn/img_c/wmts?tk=672cb0a89d759c0239f8f8b7902295e7",
			map: undefined,
			// plusIcon: require("@/assets/icons/svg/plus-square.svg"),
			// minusIcon: "@/assets/icons/svg/minus-square.svg",
			searchQuery: '',
			enterprises: [
				{ name: '昌吉市', count: 0, children: [] },
				{ name: '阜康市', count: 61, children: [{ name: "公司1" }, { name: "公司2" }, { name: "公司3" }, { name: "公司4" },] },
				{ name: '呼图壁县', count: 16, children: [{ name: "公司2" }] },
				{ name: '玛纳斯县', count: 29, children: [{ name: "公司3" }] },
				{ name: '奇台县', count: 1, children: [{ name: "公司4" }] },
				{ name: '吉木萨尔县', count: 7, children: [{ name: "公司5" }] },
				{ name: '木垒哈萨克自治县', count: 0, children: [{ name: "公司6" }] },
			],
			commonUrl: process.env.VUE_APP_COMMON_URL,
			isScreenFull: false,
			//数量展示
			lianwangCount: 9999,
			pingjiCount: 8888,
			shangbaojiluCount: 99.99,
			dangrishangbaoCount: 8888,
			//图形展示
			areaDataChart: null,
			industryDataChart: null,
			areaInlineDataChart: null,
			weekDataChart: null,
			todayInDataChart: null,
			stageDataChart: null,
			warningCarDataList: [],
			warningComDataList: [],

			//地图相关
			layerShowType: 'baseDT',
			EFshowType: false,
			layers: [],
			infowindowLayers: [],
			EFArray: [],
			EFPolygons: [],
			oldZoomLevel: 9,
			showLable: false,
			mainCenter: [87.18855806979309, 44.00680640080587],
			markers: [],
			districtSearch: null,
			companyTableList: [],
			currMarketData: null,
			currPolygon: null,
			hasOpenedEF: false,
			//企业详情弹窗
			tabsDialogParams: {
				dialogVisible: false,
				openType: null,
				objItem: null,
			},
			//车辆通行记录弹窗
			carDialogParams: {
				dialogVisible: false,
				objRecord: null,
			},
			//测试数据
			companyTableList: [
				{
					"id": 1,
					"comName": "测试企业",
					"longitude": 117.081338,
					"latitude": 39.146606,
					"ElectronicFence": [[117.081338, 39.146606], [117.080211, 39.146502], [117.08027, 39.145995], [117.081402, 39.146095]],
					"centerPoint": [117.081338, 39.146606],
					"area": "昌吉区",
					"instruct": "水泥",
					"grade": "A",
					"PWcode": "123456789123456789",
					"lianxiren": "王主任",
					"tel": "15812345678",
					"address": "昌吉市金霞路18号",
					"enterList": [
						{
							"enterName": "东门",
							"longitude": 117.081338,
							"latitude": 39.146206,
							"enterPoint": [117.081338, 39.146206],
						},
						{
							"enterName": "西门",
							"longitude": 117.081338,
							"latitude": 39.146206,
							"enterPoint": [117.080028, 39.146206],
						}

					]
				},

			],
		}
	},
	created() {
		//this.initWebSocket();
	},
	mounted() {
		window.mapVue = this;
		const end = new Date();
		const start = new Date();
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		this.subCentusTime = [start, end];
		var bbox = [9526398.116099954, 5326564.904564987, 1.0193248464624465E7, 5698459.682702317];
		var centerX = (bbox[0] + bbox[2]) / 2;
		var centerY = (bbox[1] + bbox[3]) / 2;
		var url = "http://172.16.0.202:8081/geoserver/base/wms?service=WMS&version=1.1.0&request=GetMap&layers=base%3Acj&bbox=9526398.116099954%2C5326564.904564987%2C1.0193248464624465E7%2C5698459.682702317&width=768&height=428&srs=EPSG%3A3857&styles=&format=image/png"
		var wmsLayer = new ImageLayer({
			source: new ImageWMS({
				url: url
			})
		});

		var layerGroup = new LayerGroup({
			layers: [wmsLayer]
		});



		new Map({
			target: 'container',
			layers: [
				new TileLayer({
					source: new XYZ({
						url: "https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
						attributions: '© 高德地图',
					}),
				})
				, layerGroup],
			view: new View({
				center: [centerX, centerY],
				zoom: 7
			})
		});

	},
	destroyed: function () { // 离开页面生命周期函数
		//this.websocketclose();
	},
	computed: {
		filteredEnterprises() {
			if (!this.searchQuery) {
				return this.enterprises;
			}
			return this.enterprises.filter(enterprise =>
				enterprise.name.toLowerCase().includes(this.searchQuery.toLowerCase())
			);
		}
	},
	methods: {
		tabClick(e) {
			if (this.currTab == "1") {

			} else if (this.currTab == "2") {
				this.setWeekData();

			}
		},
		handleClick() {
			logout()
			removeToken('hezuoMJXT')
			this.$router.push('/login');

		},
		handleNodeClick(data) {
			console.log(data.children)
			if (data.children != undefined || data.children != null) {
				return
			}
			this.tabsDialogParams.objItem = this.companyTableList[0];
			this.tabsDialogParams.dialogVisible = true;
		},
		toggleChildren(index) {
			this.filteredEnterprises[index].expanded = !this.filteredEnterprises[index].expanded;
		},
		autoFontSize(res) {
			let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			if (!clientWidth) return;
			let fontSize = 100 * (clientWidth / 1920);
			return res * fontSize;
		},
		//全屏
		changeScreenFull(flag) {
			this.isScreenFull = flag;
			if (this.isScreenFull == true) {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {

				}, 100);
			}
			else {
				clearTimeout(this.timer);
				this.reload();
			}
		},
		//地图相关
		loadMapCallback() {
			//alert("ok");
		},

		//切换地图图层
		changeLayerShowType() {

			if (this.map == undefined) {
				return
			}
			if (this.layerShowType != 'baseDT') {
				var s = this.map
				this.layers.forEach(element => {
					s.removeLayer(element)
				});
				this.layers = []
				var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
					"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
					"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=672cb0a89d759c0239f8f8b7902295e7";
				var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
				this.map.addLayer(lay)
				this.layers.push(lay)

				imageURL = "http://t0.tianditu.gov.cn/cta_w/wmts?" +
					"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
					"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=672cb0a89d759c0239f8f8b7902295e7";
				lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18, zoom: 2 });

				this.map.addLayer(lay)
				this.layers.push(lay)


				this.map.centerAndZoom(new window.T.LngLat(...this.mainCenter), 11);
			}
			else {
				const s = this.map
				this.layers.forEach(element => {
					s.removeLayer(element)
				});
				this.layers = []
				// this.map.addLayer(lay)

				this.map.centerAndZoom(new window.T.LngLat(...this.mainCenter), 11);
			}

		},
		//显示电子围栏图层
		changeEFshowType() {
			if (this.EFshowType == true) {
				var EFdatalist = this.EFArray;
				//alert("显示电子围栏图层");
				for (var i = 0; i < EFdatalist.length; i++) {
					var tempPolygon = new AMap.Polygon({
						map: window.mapVue.map,
						path: EFdatalist[i],
						strokeColor: "#00ffff",
						strokeWeight: 2,
						strokeOpacity: 0.8,
						fillColor: '#27a8bc',
						fillOpacity: 0.6,
						zIndex: 50,
						bubble: true,
					});
					window.mapVue.EFPolygons.push(tempPolygon);
					window.mapVue.map.add(window.mapVue.EFPolygons);
				}

			}
			else {
				//alert("关闭电子围栏图层");
				this.map.remove(this.EFPolygons);
				this.EFPolygons = [];
			}
		},
		//地图缩放后事件监听
		mapZoomend(zoomLevel) {
			//alert(this.oldZoomLevel);
			//alert(zoomLevel);
			if ((this.oldZoomLevel < 13) && (zoomLevel >= 13)) {
				//alert("显示图层");
				this.showLable = true;
				this.setmapPointMarkers();
				this.oldZoomLevel = zoomLevel;
			}
			else if ((this.oldZoomLevel >= 13) && (zoomLevel < 13)) {
				//alert("隐藏图层");
				this.showLable = false;
				this.setmapPointMarkers();
				this.oldZoomLevel = zoomLevel;
			}
			else {
				this.oldZoomLevel = zoomLevel;
			}

		},
		//行政区域下各子区域样式
		// 颜色辅助方法
		getColorByAdcode(adcode) {
			return 'rgba(0, 60, 181, 0.3)';
			/*
			if (!colors[adcode]) {
				var gb = Math.random() * 155 + 50;
				colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
			}
					
			return colors[adcode];
			*/
		},
		// 加载区域框架
		setDistrict(areaName) {
			this.districtSearch.search(areaName, function (status, result) {
				if (status == 'complete') {
					// 获取边界信息
					var bounds = result.districtList[0].boundaries;
					var polygons = [];
					if (bounds) {
						for (var i = 0, l = bounds.length; i < l; i++) {
							//生成行政区划polygon
							var polygon = new AMap.Polygon({
								map: window.mapVue.map,
								strokeWeight: 2,
								path: bounds[i],
								fillOpacity: 0.1,
								fillColor: '#CCF3FF',
								strokeColor: '#00aaff'
							})
							polygons.push(polygon)
						}
						// 地图自适应
						//window.mapVue.map.setFitView();
					}
				}
			});
		},
		//获取企业点位信息
		getComData() {
			getMapComData().then(res => {
				this.companyTableList = res.data;
				this.setmapPointMarkers();
			}).catch(error => {

			});
		},
		//加载地图点位信息
		setmapPointMarkers() {
			this.map.remove(this.markers);
			this.markers = [];
			var markersList = this.companyTableList;
			//var markersList = res.rows;
			for (var i = 0; i < markersList.length; i++) {
				/*
				if (!((markersList[i].longitude)&&(markersList[i].latitude))||((markersList[i].longitude == "null")||(markersList[i].latitude == "null"))||((markersList[i].longitude == "undefined")||(markersList[i].latitude == "undefined"))||((markersList[i].longitude.indexOf("°") > 0)||(markersList[i].latitude.indexOf("°") > 0))||((markersList[i].longitude.split(".").length > 2)||(markersList[i].latitude.split(".").length > 2))||((markersList[i].longitude.indexOf("'") > 0)||(markersList[i].latitude.indexOf("'") > 0))||((markersList[i].longitude.indexOf("′") > 0)||(markersList[i].latitude.indexOf("′") > 0))||((markersList[i].longitude.indexOf("″") > 0)||(markersList[i].latitude.indexOf("″") > 0))||((markersList[i].longitude.indexOf("无") > 0)||(markersList[i].latitude.indexOf("无") > 0)))
				{
					continue;
				}
				*/

				if ((markersList[i].longitude == "无") || (markersList[i].latitude == "无")) {
					continue;
				}
				if ((markersList[i].longitude == "null") || (markersList[i].latitude == "null")) {
					continue;
				}
				if ((markersList[i].longitude == "undefined") || (markersList[i].latitude == "undefined")) {
					continue;
				}
				if ((markersList[i].longitude == "") || (markersList[i].latitude == "")) {
					continue;
				}
				var currIcon = iconDevice;
				var GCJPoint = this.translateToGCJ(markersList[i].longitude, markersList[i].latitude);
				//var LngLat = new AMap.LngLat(GCJPoint.lon,GCJPoint.lat);
				var LngLat = new AMap.LngLat(markersList[i].longitude, markersList[i].latitude);

				var marker = new AMap.Marker({
					icon: currIcon,
					position: LngLat,
					extData: markersList[i],
					label: {
						content: window.mapVue.showLable ? markersList[i].companyName : "",
						direction: 'top',
					}
				});
				//marker.on('click', window.mapVue.markerClick);
				this.markers.push(marker);
				this.map.add(this.markers);

				this.EFArray = [[[117.081338, 39.146606], [117.080211, 39.146502], [117.08027, 39.145995], [117.081402, 39.146095]], [[117.521212, 39.593939], [117.521212, 39.595939], [117.531212, 39.595939], [117.531212, 39.593939]]]
			}
		},
		openInfoWindow(e, company) {
			var id = company.id
			var name = company.comName
			var address = company.address
			this.currMarketData = id;
			var info = [];
			//标题
			info.push('<div style="width: 250px;height: 30px;line-height:30px;padding:0px 0px 0px 10px;color:#ffffff;border-radius: 5px 5px 0 0;background-color:#00aaff;opacity: 0.9;font-size: 16px;">概要信息<span id="infoWindow" style="width:40px;text-align: center;float:right;" onclick="window.mapVue.closeInfoWindow()">x</span></div>');
			//内容-start
			info.push('<div style="width: 250px;height: auto;padding:10px;border-radius: 0px 0px 5px 5px;background-color:#003c5a;opacity: 0.9;font-size: 14px;display: flex;flex-direction: column;">');

			info.push('<div id="" style="width: 100%;color:#00aaff;height: auto;">名称：');
			info.push('<span style="color:#56d9c8;">' + name + '</span>');
			info.push('</div>');

			info.push('<div id="" style="width: 100%;color:#00aaff;height: auto;margin-top:5px;">地址：');
			info.push('<span style="color:#56d9c8;">' + address + '</span>');
			info.push('</div>');

			info.push('<div id="" style="width: 100%;color:#00aaff;height: 40px;padding-top:10px;align-item:center;display:flex;">');
			info.push('<div style="display:flex;width: 90px;height:28px;background-color:#00aaff;color:#ffffff;text-align: center;align-items: center;justify-content: center;border-radius: 5px;" onclick="window.mapVue.openComDetailDialog()">企业详情</div>');
			info.push('</div>');
			info.push('</div>');
			var infowindow = new window.T.InfoWindow(info.join(""), { closeButton: false });
			infowindow.setLngLat(e.lnglat)
			e.openInfoWindow(infowindow)

			var elements = window.document.querySelectorAll('.tdt-infowindow-content');
			// 遍历元素并去除 margin
			elements.forEach((element) => {
				element.style.margin = '0';
				element.style.width = '250px';
				element.style.borderRadius = " 0px 0px 5px 5px";

			});

			elements = window.document.querySelectorAll('.tdt-infowindow-content-wrapper')

			// 遍历元素并去除 margin
			elements.forEach((element) => {
				element.style.margin = '0';
				element.style.padding = '0';
				element.style.borderRadius = " 5px 5px 5px 5px";
				element.style.width = '250px';

			});

		},
		closeInfoWindow() {
			this.map.closeInfoWindow();
		},
		//地图显示单个站点围栏信息
		openEF() {
			this.currMarketData = this.companyTableListTest[0];
			//alert(this.currMarketData.comName);
			this.map.clearInfoWindow();
			//this.map.remove(this.markers);
			this.map.setZoomAndCenter(18, this.currMarketData.centerPoint);
			this.currPolygon = null;
			this.hasOpenedEF = true;
			//var data = this.currMarketData;
			this.currPolygon = new AMap.Polygon({
				map: window.mapVue.map,
				path: window.mapVue.currMarketData.ElectronicFence,
				strokeColor: "#00ffff",
				strokeWeight: 2,
				strokeOpacity: 0.8,
				fillColor: '#27a8bc',
				fillOpacity: 0.6,
				zIndex: 50,
				bubble: true,
				/*
				extData: {
					id: data.id,
					name: data.name,
					company: data.company,
					principalName: data.principalName,
					principalPhone: data.principalPhone,
					memo: data.memo,
				},
				*/
			});
			/*
			polygon.on('click',function(event){
				window.mapVue.currPolygon = polygon;
				window.mapVue.openInfoWindow(event);
			});
			*/
			var marker = new AMap.Marker({
				icon: iconEnter,
				position: window.mapVue.currMarketData.enterList[0].enterPoint, //此处更换为进出点
				/*
				extData: {
					id: markersList[i].id,
					Name: markersList[i].comName,
					longitude: markersList[i].longitude,
					latitude: markersList[i].latitude,
					address: markersList[i].address,
				},
				*/
				extData: window.mapVue.currMarketData,
				label: {
					content: window.mapVue.currMarketData.enterList[0].enterName,
					direction: 'bottom',
				}

			});
			this.map.add(marker);
		},
		closeEF() {
			//alert("关闭围栏");
			this.map.remove(this.currPolygon);
			this.hasOpenedEF = false;
			//alert(this.mainCenter[0]);
			//alert(this.mainCenter[1]);
			var LngLat = new AMap.LngLat(this.mainCenter[0], this.mainCenter[1]);
			this.map.setZoomAndCenter(9, LngLat);
		},
		//地图点击站点事件
		markerClick(e) {

		},
		//企业数和企业分布
		setComDataTotalAndPer() {
			getComDataTotalAndPer().then(res => {
				this.setCountData(res);
				this.setAreaData(res);
				this.setIndustryData(res);
			}).catch(error => {

			});
		},
		//数量信息显示
		setCountData(res) {
			this.lianwangCount = res.data.companyOnline;
			this.pingjiCount = res.data.companyGrading;
			//this.lianwangCount = 88888;
			//this.pingjiCount = 99999;
		},
		//获取各区企业数据统计
		setAreaData(res) {
			var dataObj = res.data.countyMap;
			var totalCount = 0;
			var dataSource = [];
			var tempData = Object.keys(dataObj).map(key => {
				//return { [key]: obj[key] };
				var subTempData = {
					"name": [key],
					"value": dataObj[key],
				}
				dataSource.push(subTempData);
				totalCount = totalCount + dataObj[key];
			});
			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"东丽","value":128},{"id":"1","name":"西青","value":96},{"id":"2","name":"津南","value":168},{"id":"3","name":"北辰","value":158},{"id":"4","name":"滨海新区","value":128},{"id":"5","name":"宁河","value":96},{"id":"6","name":"静海","value":168},{"id":"7","name":"武清","value":158},{"id":"8","name":"宝坻","value":168},{"id":"9","name":"蓟州","value":158}];
			this.drawAreaDataChart(totalCount, dataSource);
		},
		drawAreaDataChart(totalCount, dataSource) {
			if (this.areaDataChart != null && this.areaDataChart != "" && this.areaDataChart != undefined) {
				this.areaDataChart.dispose();
			};
			this.areaDataChart = echarts.init(document.getElementById('areaDataDiv'));
			this.areaDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各区企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%', '60%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#00aaff',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = Math.round(params.data.value / totalCount * 100);
								}
								return params.data.name + ":" + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 35
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#ffaa00'
							}
						},
						data: dataSource
					}
				]
			});
		},
		//获取各行业企业数据统计
		setIndustryData(res) {
			var dataObj = res.data.industryMap;
			var totalCount = 0;
			var dataSource = [];
			var tempData = Object.keys(dataObj).map(key => {
				//return { [key]: obj[key] };
				var subTempData = {
					"name": [key],
					"value": dataObj[key],
				}
				dataSource.push(subTempData);
				totalCount = totalCount + dataObj[key];
			});
			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"水泥","value":128},{"id":"1","name":"炼钢","value":96},{"id":"2","name":"镀锌","value":168},{"id":"3","name":"炼油","value":158},{"id":"4","name":"橡胶","value":128},{"id":"5","name":"家具","value":96},{"id":"6","name":"其他","value":168}];
			this.drawIndustryDataChart(totalCount, dataSource);
		},
		drawIndustryDataChart(totalCount, dataSource) {
			if (this.industryDataChart != null && this.industryDataChart != "" && this.industryDataChart != undefined) {
				this.industryDataChart.dispose();
			};
			this.industryDataChart = echarts.init(document.getElementById('industryDataDiv'));
			this.industryDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各行业企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%', '60%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = Math.round(params.data.value / totalCount * 100);
								}
								return params.data.name + ":" + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 35
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
		//设置各区联网企业数/连网率
		setAreaInlineData() {
			getAreaInlineData().then(res => {
				var nameArray = [];
				var dataArray = [];
				var lineDataArray = [];
				for (var i = 0; i < res.data.length; i++) {
					nameArray.push(res.data[i].cname);
					dataArray.push(res.data[i].companyGrading);
					lineDataArray.push(res.data[i].onlineRate);
				}
				this.drawAreaInlineChart(nameArray, dataArray, lineDataArray);
			}).catch(error => {

			});

			//var nameArray = ["东丽","西青","津南","北辰","滨海新区","武清","静海","宁河","宝坻","蓟州"];
			//var dataArray = [120,168,145,108,178,158,130,96,90,68];
			//var lineDataArray = [100,100,98.62,100,96,100,88,96.88,90,100];
			//this.drawAreaInlineChart(nameArray,dataArray,lineDataArray);
		},
		drawAreaInlineChart(nameArray, dataArray, lineDataArray) {
			if (this.areaInlineDataChart != null && this.areaInlineDataChart != "" && this.areaInlineDataChart != undefined) {
				this.areaInlineDataChart.dispose();
			};
			this.areaInlineDataChart = echarts.init(document.getElementById('areaInlineDataDiv'));
			this.areaInlineDataChart.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter: function (params) {
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >企业数：' + params[0].value + '</br >联网率：' + params[1].value + '%';
					}

				},
				grid: {
					top: '15%',
					left: '10%',
					right: '10%',
					bottom: '20%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine: {
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 30,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle: {
								color: '#436ed0'
							}
						}
					},
				],
				yAxis:
					[
						{
							type: 'value',
							name: '企业数',
							position: 'left',
							alignTicks: true,
							nameTextStyle: {
								fontSize: this.autoFontSize(0.12),
							},
							//minInterval: 1,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#00aaff'
								}
							},
							axisLabel: {
								show: true,
								color: '#00aaff',
								fontSize: this.autoFontSize(0.12),
								formatter: function (value, index) {
									return value;
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0',
									opacity: 0.1
								}
							}
						},
						{
							type: 'value',
							name: '联网率',
							position: 'right',
							alignTicks: true,
							nameTextStyle: {
								fontSize: this.autoFontSize(0.12),
							},
							//minInterval: 1,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#ffaa00'
								}
							},
							axisLabel: {
								show: true,
								color: '#ffaa00',
								fontSize: this.autoFontSize(0.12),
								formatter: function (value, index) {
									return value + " %";
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0',
									opacity: 0.1
								}
							},
						}
					],
				series:
					[
						{
							//data: [120, 20, 150, 80, 70, 110, 130],
							name: '企业数',
							data: dataArray,
							type: 'bar',
							barWidth: this.autoFontSize(0.15),
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{ offset: 0, color: 'rgba(0, 170, 255, 1.0)' },                   //柱图渐变色
										{ offset: 0.5, color: 'rgba(0, 170, 255, 0.8)' },                   //柱图渐变色
										{ offset: 1, color: 'rgba(0, 170, 255, 0.5)' },                   //柱图渐变色
									]
								),
								borderRadius: [0, 0, 0, 0]
							},
						},
						{
							name: '联网率',
							data: lineDataArray,
							type: 'line',
							yAxisIndex: 1,
							itemStyle: {
								color: "#ffaa00"
							}
						}
					]

			});
		},
		//近一周上报统计
		setWeekData() {
			getWeekData().then(res => {
				var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i = 0; i < dataList.length; i++) {
					nameArray.push(dataList[i].name.split("-")[1] + "-" + dataList[i].name.split("-")[2]);
					dataArray.push(dataList[i].value);
				}
				this.drawWeekDataChart(nameArray, dataArray);
			}).catch(error => {

			});


		},
		drawWeekDataChart(nameArray, dataArray) {
			if (this.weekDataChart != null && this.weekDataChart != "" && this.weekDataChart != undefined) {
				this.weekDataChart.dispose();
			};
			this.weekDataChart = echarts.init(document.getElementById('weekDataDiv2'));
			this.weekDataChart.setOption({
				title: {
					text: '各片区车辆数对比'
				},
				legend: {
					data: ['昌吉市'],

				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter: function (params) {
						return params[0].name + '</br >车辆数：' + params[0].value;
					}
				},
				grid: {
					top: '18%',
					left: '10%',
					right: '5%',
					bottom: '20%',
					zlevel: 1,
					containLabel: true

				},
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine: {
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 0,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle: {
								color: '#436ed0'
							}
						}
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '车辆数',
						position: 'left',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
								return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#436ed0',
								opacity: 0.1
							}
						}
					},
				],
				series: [
					{
						name: '昌吉市',
						data: dataArray,
						type: 'line',
						barWidth: this.autoFontSize(0.15),
						itemStyle: {
							color: "#00ffff"
						},

					},
				]
			});

			this.weekDataChart = echarts.init(document.getElementById('weekDataDiv1'));
			this.weekDataChart.setOption({
				color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
				title: {
					text: '各排放阶段对比'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					}
				},
				legend: {
					data: ['国四及以下']
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					top: '18%',
					left: '10%',
					right: '5%',
					bottom: '20%',
					zlevel: 1,
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 0,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle: {
								color: '#436ed0'
							}
						}
					},
				],
				yAxis:
					[
						{
							type: 'value',
							name: '车辆数',
							position: 'left',
							alignTicks: true,
							nameTextStyle: {
								fontSize: this.autoFontSize(0.12),
							},
							//minInterval: 1,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#00aaff'
								}
							},
							axisLabel: {
								show: true,
								color: '#00aaff',
								fontSize: this.autoFontSize(0.12),
								formatter: function (value, index) {
									return value;
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0',
									opacity: 0.1
								}
							}
						},
					],
				series:
					[
						{
							name: '国四及以下',
							data: dataArray,
							type: 'line',
							stack: 'Total',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.8,
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{ offset: 0, color: 'rgba(0, 255, 255, 0.3)' },
										{ offset: 0.3, color: 'rgba(0, 255, 255, 0.2)' },
										{ offset: 1, color: 'rgba(0, 255, 255, 0.1)' },
									]
								),
							},
							emphasis: {
								focus: 'series'
							},
						},
					]

			});
		}
		,
		//获取上报数和企业进出排名top
		setReportDataAndTop() {
			getReportDataAndTop().then(res => {
				this.shangbaojiluCount = Math.floor(res.data.total / 10000);
				this.dangrishangbaoCount = res.data.today;
				this.setTodayInData(res);
			}).catch(error => {

			});
		},
		//当日企业进场记录排名
		setTodayInData(res) {
			var nameArray = [];
			var dataArray = [];
			var dataList = res.data.list;
			for (var i = (dataList.length - 1); i >= 0; i--) {
				nameArray.push(dataList[i].name);
				dataArray.push(dataList[i].value);
				if (i == 0) {
					this.drawTodayInDataChart(nameArray, dataArray);
				}
			}


			//var nameArray = ["测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1","测试企业名称1"];
			//var dataArray = [-1330,-1350,-1380,-1400,-1430,-1450,-1480,-1500,-1530,-1550,-1580,-1600,-1630,-1650,-1680];
			//var dataArray = [1330,1350,1380,1400,1430,1450,1480,1500,1530,1550,1580,1600,1630,1650,1680];
			//this.drawTodayInDataChart(nameArray,dataArray);
		},
		drawTodayInDataChart(nameArray, dataArray) {
			if (this.todayInDataChart != null && this.todayInDataChart != "" && this.todayInDataChart != undefined) {
				this.todayInDataChart.dispose();
			};
			this.todayInDataChart = echarts.init(document.getElementById('todayInDataDiv'));
			this.todayInDataChart.setOption({
				tooltip: {
					show: false,
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter: function (params) {
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >车辆数：' + params[0].value;
					}

				},
				grid: {
					top: '5%',
					left: '50%',
					right: '10%',
					bottom: '5%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'value',
						name: '',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine: {
							show: false,
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: false,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
								return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#436ed0',
								opacity: 0.1
							}
						}
					},
				],
				yAxis:
					[
						{
							type: 'category',
							data: nameArray,
							//position: 'left',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#00aaff'
								}
							},
							axisTick: {
								show: true,
							},
							axisLabel: {
								show: true,
								interval: 0,
								rotate: 0,
								color: '#00ffff',
								inside: false,
								//margin: 80,
								fontSize: this.autoFontSize(0.12),
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0'
								}
							}
						},
					],
				series:
					[
						{
							name: '进场数',
							data: dataArray,
							type: 'bar',
							barWidth: this.autoFontSize(0.1),
							label: {
								show: true,
								position: 'right',
								color: '#ffaa00',
								formatter: function (obj, index) {
									return (obj.value);
								}
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 1, 0,
									[
										//柱图渐变色
										{ offset: 1, color: 'rgba(0, 255, 255, 0.6)' },
										{ offset: 0.5, color: 'rgba(0, 255, 255, 0.3)' },
										{ offset: 0, color: 'rgba(0, 255, 255, 0.1)' },
									],
								),
								borderRadius: [5, 5, 5, 5]
							}
						},
					]
			});
		},
		setStageData() {
			getStageData().then(res => {
				var dataList = res.data;
				var totalCount = 0;
				for (var i = 0; i < dataList.length; i++) {
					totalCount = totalCount + dataList[i].value;
				}
				this.drawStageDataChart(totalCount, dataList);
			}).catch(error => {

			});

			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"新能源","value":128},{"id":"1","name":"国六","value":96},{"id":"2","name":"国五","value":168},{"id":"3","name":"国四","value":158},{"id":"4","name":"国三","value":128},{"id":"6","name":"其他","value":168}];
			//this.drawStageDataChart(totalCount,dataSource);
		},
		drawStageDataChart(totalCount, dataSource) {
			if (this.stageDataChart != null && this.stageDataChart != "" && this.stageDataChart != undefined) {
				this.stageDataChart.dispose();
			};
			this.stageDataChart = echarts.init(document.getElementById('stageDataDiv'));
			this.stageDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '15%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各行业企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%', '70%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = (params.data.value / totalCount * 100).toFixed(1);
								}
								return params.data.name + ": " + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 25
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},
		//设置车辆预警数据
		setWarningCarData() {
			getWarningCarData().then(res => {
				this.warningCarDataList = res.data;
			}).catch(error => {

			});
			var warningCarDataListTest = [
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称1"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称2"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称3"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称4"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称5"
				},
				{
					"carNum": "津D68765",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称6"
				}
			]
		},
		//设置企业告警数据
		setWarningComData() {
			getWarningComData().then(res => {
				this.warningComDataList = res.data;
			}).catch(error => {

			});
			var warningComDataListTest = [
				{
					"SBL": "78",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称1"
				},
				{
					"SBL": "79",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称2"
				},
				{
					"SBL": "68",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称3"
				},
				{
					"SBL": "56",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称4"
				},
				{
					"SBL": "75",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称5"
				},
				{
					"SBL": "77",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称6"
				}
			]
		},
		//企业详情弹窗
		openComDetailDialog() {
			this.tabsDialogParams.objItem = this.companyTableList[0];
			this.tabsDialogParams.dialogVisible = true;


		},
		openComDetailFromWarning(item) {
			alert(item.reason.split("[")[2].replace("]", ""));
			//去获取企业详细信息
			return;
			this.tabsDialogParams.objItem = this.currMarketData;
			this.tabsDialogParams.openType = "warningCom";
			this.tabsDialogParams.dialogVisible = true;
		},
		openCarDetailFromWarning(item) {
			alert(item.subject);
			this.carDialogParams.objRecord = item;
			this.carDialogParams.dialogVisible = true;
		},

		translateToGCJ(wgsLon, wgsLat) {
			var GPS = {
				PI: 3.14159265358979324,
				x_pi: 3.14159265358979324 * 3000.0 / 180.0,
				delta: function (lat, lon) {
					var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
					var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
					var dLat = this.transformLat(lon - 105.0, lat - 35.0);
					var dLon = this.transformLon(lon - 105.0, lat - 35.0);
					var radLat = lat / 180.0 * this.PI;
					var magic = Math.sin(radLat);
					magic = 1 - ee * magic * magic;
					var sqrtMagic = Math.sqrt(magic);
					dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
					dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
					return { 'lat': dLat, 'lon': dLon };
				},

				//WGS-84 to GCJ-02
				gcj_encrypt: function (wgsLat, wgsLon) {
					if (this.outOfChina(wgsLat, wgsLon))
						return { 'lat': wgsLat, 'lon': wgsLon };

					var d = this.delta(wgsLat, wgsLon);
					return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon };
				},
				//GCJ-02 to WGS-84
				gcj_decrypt: function (gcjLat, gcjLon) {
					if (this.outOfChina(gcjLat, gcjLon))
						return { 'lat': gcjLat, 'lon': gcjLon };

					var d = this.delta(gcjLat, gcjLon);
					return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon };
				},
				//GCJ-02 to WGS-84 exactly
				gcj_decrypt_exact: function (gcjLat, gcjLon) {
					var initDelta = 0.01;
					var threshold = 0.000000001;
					var dLat = initDelta, dLon = initDelta;
					var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
					var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
					var wgsLat, wgsLon, i = 0;
					while (1) {
						wgsLat = (mLat + pLat) / 2;
						wgsLon = (mLon + pLon) / 2;
						var tmp = this.gcj_encrypt(wgsLat, wgsLon)
						dLat = tmp.lat - gcjLat;
						dLon = tmp.lon - gcjLon;
						if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
							break;

						if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
						if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;

						if (++i > 10000) break;
					}
					//console.log(i);
					return { 'lat': wgsLat, 'lon': wgsLon };
				},
				//GCJ-02 to BD-09
				bd_encrypt: function (gcjLat, gcjLon) {
					var x = gcjLon, y = gcjLat;
					var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
					var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
					var bdLon = z * Math.cos(theta) + 0.0065;
					var bdLat = z * Math.sin(theta) + 0.006;
					return { 'lat': bdLat, 'lon': bdLon };
				},
				//BD-09 to GCJ-02
				bd_decrypt: function (bdLat, bdLon) {
					var x = bdLon - 0.0065, y = bdLat - 0.006;
					var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
					var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
					var gcjLon = z * Math.cos(theta);
					var gcjLat = z * Math.sin(theta);
					return { 'lat': gcjLat, 'lon': gcjLon };
				},
				//WGS-84 to Web mercator
				//mercatorLat -> y mercatorLon -> x
				mercator_encrypt: function (wgsLat, wgsLon) {
					var x = wgsLon * 20037508.34 / 180.;
					var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
					y = y * 20037508.34 / 180.;
					return { 'lat': y, 'lon': x };
				},
				// Web mercator to WGS-84
				// mercatorLat -> y mercatorLon -> x
				mercator_decrypt: function (mercatorLat, mercatorLon) {
					var x = mercatorLon / 20037508.34 * 180.;
					var y = mercatorLat / 20037508.34 * 180.;
					y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
					return { 'lat': y, 'lon': x };
				},
				// two point's distance
				distance: function (latA, lonA, latB, lonB) {
					var earthR = 6371000.;
					var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
					var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
					var s = x + y;
					if (s > 1) s = 1;
					if (s < -1) s = -1;
					var alpha = Math.acos(s);
					var distance = alpha * earthR;
					return distance;
				},
				outOfChina: function (lat, lon) {
					if (lon < 72.004 || lon > 137.8347)
						return true;
					if (lat < 0.8293 || lat > 55.8271)
						return true;
					return false;
				},
				transformLat: function (x, y) {
					var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
					ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
					ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
					ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
					return ret;
				},
				transformLon: function (x, y) {
					var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
					ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
					ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
					ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
					return ret;
				}
			};
			//alert("字符串转数值：" + (wgsLat*100000000/100000000));
			//GPS的方法中对经纬度的运算都是数值型，所以GPS入参先转为数值型
			//GPS转高德
			//var gcjPoint = GPS.gcj_encrypt((wgsLat*100000000/100000000),(wgsLon*100000000/100000000));
			//return { 'lat': gcjPoint.lat, 'lon': gcjPoint.lon };
			//高德转百度 （GPS转百度，要先转高德，再转百度）
			//var BDPoint = GPS.bd_encrypt(gcjPoint.lat,gcjPoint.lon);
			//return { 'lat': gcjPoint.lat, 'lon': gcjPoint.lon };
			//百度转高德
			var gcjPoint = GPS.bd_decrypt((wgsLat * 100000000 / 100000000), (wgsLon * 100000000 / 100000000));
			return { 'lat': gcjPoint.lat, 'lon': gcjPoint.lon };

		},
	},
}
</script>

<style>
/* 导航栏和标题的设置*/
.nav-menu {
	display: flex;
	align-items: center;
	/* 使导航项在垂直方向上居中 */
	/* 可以根据需要调整与其他元素的间距 */
}

.nav-item {
	text-decoration: none;
	color: #fff;
	display: inline-block;
	/* 导航项之间的水平间距 */
	padding: 5px 10px;
	/* 增加内边距，使导航项更美观且点击区域更大 */
	transition: all 0.2s ease;
	/* 添加过渡效果，使样式变化更平滑（可选） */
}

.nav-item:active,
.nav-item:hover,
.nav-item:focus {
	color: #fff;
	text-decoration: none;
	background-color: transparent;
	outline: none;
}

.active-nav {
	background-image: url("~@/assets/image/activate.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	/* 添加这一行，使背景图在水平和垂直方向都居中 */

}

.el-dialog__body {
	padding: 0px 20px 20px 20px;
}

::-webkit-scrollbar {
	/*width: 0;宽度为0隐藏*/
	height: 6px;
	width: 3px;
}

::-webkit-scrollbar-thumb {
	border-radius: 2px;
	height: 50px;
	background-color: #00aaff;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 0px;
	/*background-color: rgba(62, 106, 181, 0.8);*/
	background-color: rgba(0, 170, 255, 0.2);
}

.amap-logo {
	display: none;
	opacity: 0 !important;
}

.amap-copyright {
	opacity: 0;
}

.amap-marker-label {
	position: absolute;
	z-index: 2;
	border: 0px solid blue;
	background-color: rgba(31, 107, 134, 0.8);
	color: #ffaa00;
	white-space: nowrap;
	cursor: default;
	padding: 3px;
	font-size: 12px;
	line-height: 14px;
}
</style>
<style scoped>
.map_menu {
	position: absolute;
	z-index: 1;
	right: 32vw;
	bottom: 1vh;
	/*
		background-color: rgba(97, 118, 131, 1);
		*/
	border-radius: 5px;
	display: flex;
}

.bigScreenBodyDiv {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: no-repeat center top;
	background-size: cover;
}

.bigScreenHeader {
	width: 100%;
	height: 60px;
	display: flex;
	z-index: 1;
	color: #333;
	text-align: center;
}

.bigScreenBodyDivMain {
	flex: 1;
	width: 100%;
	display: flex;
}

.mappanel {
	background-color: rgba(27, 111, 250, 0);
	border: 0px solid rgba(27, 111, 250, 0.3) !important;
}

.outpanel {
	background-color: rgba(27, 111, 250, 0);
	border: 1px solid rgba(27, 111, 250, 0.3) !important;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.inpanel {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	background-color: rgba(27, 111, 250, 0);
}

.leftinpanel {
	border: 1px solid rgba(34, 170, 211, 0.8);
	border-image: -webkit-linear-gradient(top left, #00aaff 25%, rgba(27, 111, 250, 0.3) 50%, rgba(27, 111, 250, 0) 75%, rgba(27, 111, 250, 0) 95%) 10 10 10 10;
}

.rightinpanel {
	border: 1px solid rgba(34, 170, 211, 0.8);
	border-image: -webkit-linear-gradient(top right, #00aaff 25%, rgba(27, 111, 250, 0.3) 50%, rgba(27, 111, 250, 0) 75%, rgba(27, 111, 250, 0) 95%) 10 10 10 10;
}

.inpanel-title {
	width: 100%;
	height: 1.875rem;
	display: flex;
	padding-left: 1rem;
	background-color: rgba(27, 111, 250, 0);
	border: 0px solid rgba(27, 111, 250, 0.3) !important;
	border-bottom: 0px solid rgba(27, 111, 250, 0.5) !important;

}

.inpanel-title-left {
	width: 40%;
	height: 100%;
	text-align: left;
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.inpanel-title-center {
	flex: 1;
	height: 100%;
	padding: 0.1875rem;
	line-height: 1.5rem;
	text-align: right;
}

.inpanel-title-right {
	width: 140px;
	height: 100%;
	/*
		line-height: 1.5rem;
		*/
	padding: 0rem 0.65rem;
	text-align: right;
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.iconmore {
	color: #00B0FF;
	padding-right: 0.3125rem;
}

.el-checkbox__inner {
	background-color: rgba(0, 49, 72, 0.8);
	border: 1px solid rgba(0, 82, 120, 0.8);
}

.home_div {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
}

#container {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: calc(100% - 0px);
	z-index: 11;
}

.map_alerm {
	position: absolute;
	z-index: 1;
	width: 30%;
	height: 150px;
	left: 35%;
	bottom: 10px;
	background-image: linear-gradient(to bottom, rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.7), rgba(11, 58, 87, 0.7), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.9), rgba(11, 58, 87, 0.9), rgba(11, 58, 87, 0.9));
	border-radius: 5px;
	display: flex;
}


.enterprise-search-container {
	width: 300px;
	background-color: #1c2732;
	/* 深色背景色 */
	color: white;
	/* 白色字体 */
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: #283545;
	/* 搜索框背景色 */
	padding: 8px 12px;
	border-bottom: 1px solid #334155;
}

.search-bar input {
	width: 100%;
	background: transparent;
	border: none;
	color: white;
	outline: none;
}

.enterprise-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	max-height: 300px;
	/* 可根据需要调整最大高度 */
	overflow-y: auto;
	/* 出现内容过多时显示纵向滚动条 */
}

.enterprise-list li {
	padding: 8px 12px;
	cursor: pointer;
}

.enterprise-list li:hover {
	background-color: #283545;
	/* 鼠标悬停背景色 */
}

.blockTitle {
	width: 100%;
	height: 1.5vw;
	color: black;
	text-align: center;
	display: table;
	border-bottom: 1px solid rgba(34, 170, 211, 0.8);
	border-image: linear-gradient(to right, rgba(27, 111, 250, 0) 0%, rgba(27, 111, 250, 0.3) 25%, #00aaff 50%, rgba(27, 111, 250, 0.3) 75%, rgba(27, 111, 250, 0) 100%) 10 10 10 10;
}

.blockTitleText {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 0.8vw;
}
</style>
<style>
.el-table {
	background-color: #090f1a;
	opacity: 0.8;
}

.el-input {
	background-color: #090f1a;
	opacity: 0.8;
}

.el-table th {
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: #062756;
}

.el-table th.is-leaf,
.el-table td {
	border-bottom: 1px solid #1E7EF4;
}

.el-table tbody tr>td {
	background-color: #090f1a !important;
}

.el-table tbody tr:hover>td {
	background-color: #365795 !important;
	color: #00ffff;
}

.el-table__body-wrapper::-webkit-scrollbar {
	/*width: 0;宽度为0隐藏*/
	width: 3px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
	border-radius: 2px;
	height: 50px;
	background-color: #55aaff;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 0px;
	background-color: rgba(9, 15, 26, 0.8);
}


.el-tree-node__expand-icon.expanded {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}


.el-tree-node__content {

	margin-bottom: 10px;

}

.el-tree-node__content:hover {
	background-color: transparent;
}

.el-tree-node:focus>.el-tree-node__content {
	background-color: #1E374F;
}

.tree-container {
	height: 240px;
	/* 设置容器高度 */
	overflow-y: auto;
	/* 当内容超出高度时显示垂直滚动条 */
}

.tree-container::-webkit-scrollbar {
	width: 10px;
	background: none;
	border-radius: 5px;

}

.tree-container::-webkit-scrollbar-thumb {
	background: rgb(37, 114, 135);
	/* 设置滚动条滑块颜色为蓝色 */
	border-radius: 5px;
}

.el-input__inner {
	color: white;
	background: rgba(3, 89, 115, 0.8);
}

input::-webkit-input-placeholder {

	-webkit-text-fill-color: white;

}

#quyu {
	background: url("~@/assets/image/region-btn-active.svg") no-repeat center center;
}

#qushi {
	background: url("~@/assets/image/trend-btn.svg") no-repeat center center;
}
</style>
<style scoped lang="scss">
#year-actual {
	width: 572px;
	height: 100%;
	margin: 0px auto;
	box-sizing: border-box;
	padding-top: 23px;

	.group {
		width: 100%;
		margin-bottom: 30px;

		.title {
			width: 100%;
			font-size: 22px;
			color: #effafb;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 23px;
		}
	}

	.group1 {
		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-left: 20px;

			.item {
				width: 268px;
				height: 74px;
				box-sizing: border-box;
				margin-right: 0px;
				margin-bottom: 24px;
				background-size: contain;
				padding-left: 95px;
				display: flex;
				align-items: center;

				.name {
					width: 60%;
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;

					span {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;

						&:nth-child(1) {
							font-size: 13px;
							margin-bottom: 5px;
						}

						&:nth-child(2) {
							font-size: 22px;
							color: #f0f6fb;
						}
					}
				}

				.wave {
					width: 40%;
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;

					i {
						display: block;
						width: 0px;
						height: 0px;
						margin-bottom: 7px;
						margin-left: 2px;
						border-style: solid;
						border-color: transparent;
						border-width: 5px;
					}

					.icolor1 {
						border-bottom-color: #ff6a30;
						border-bottom-width: 10px;
					}

					.icolor2 {
						border-top-color: #00ffff;
						border-top-width: 10px;
					}

					span {
						font-size: 20px;
						color: #0d84c1;

						small {
							font-size: 14px;
							color: #0d84c1;
						}
					}
				}

				&:nth-child(even) {
					margin-right: 0px;
				}

				&:nth-last-child(1),
				&:nth-last-child(2) {
					margin-bottom: 0px;
				}

				&:nth-child(1) {
					background: url("~@/assets/image/month-nox.png") no-repeat left center;

					.name {
						span {
							&:nth-child(1) {
								color: #11a2f3;
							}
						}
					}
				}

				&:nth-child(2) {
					background: url("~@/assets/image/month-pm.png") no-repeat left center;

					.name {
						span {
							&:nth-child(1) {
								color: #ff9102;
							}
						}
					}

				}

				&:nth-child(3) {
					background: url("~@/assets/image/month-vocs.png") no-repeat left center;

					.name {
						span {
							&:nth-child(1) {
								color: #0439ca;
							}
						}
					}

				}

				&:nth-child(4) {
					background: url("~@/assets/image/month-so2.png") no-repeat left center;

					.name {
						span {
							&:nth-child(1) {
								color: #9d1fdf;
							}
						}
					}

				}

				&:nth-child(5) {
					background: url("~@/assets/image/month-co2.png") no-repeat left center;

					.name {
						span {
							&:nth-child(1) {
								color: #09e5d0;
							}
						}
					}

				}

				&:nth-child(6) {
					background: url("~@/assets/image/month-all.png") no-repeat left center;

					.name {
						span {
							&:nth-child(1) {
								color: #07ecf4;
							}
						}
					}

				}

			}
		}
	}

	.group2 {
		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 172px;
				height: 104px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				box-sizing: border-box;
				padding: 0px 11px 6px 11px;
				text-align: center;
				margin-bottom: 21px;
				margin-right: 11px;

				.num {
					width: 100%;
					font-size: 22px;
					color: #f0f6fb;
					margin-bottom: 15px;
				}

				.name {
					width: 100%;
					height: 30px;
					font-size: 14px;
					line-height: 30px;
					color: #f0f6fb;
					border-radius: 2px;
					overflow: hidden;
				}

				&:nth-child(3n) {
					margin-right: 0px;
				}

				&:nth-last-child(1),
				&:nth-last-child(2),
				&:nth-last-child(3) {
					margin-bottom: 0px;
				}

				&:nth-child(1) {
					background: url("~@/assets/image/year-nox.png") no-repeat left center;

					.name {
						background-image: linear-gradient(115deg, #40b0f1b3 0%, #07e7f3b3 100%);
					}
				}

				&:nth-child(2) {
					background: url("~@/assets/image/year-pm.png") no-repeat left center;

					.name {
						background-image: linear-gradient(115deg, #ff9102b3 0%, #ffa701b3 50%, #ffba00b3 100%);
					}

				}

				&:nth-child(3) {
					background: url("~@/assets/image/year-vocs.png") no-repeat left center;

					.name {
						background-image: linear-gradient(115deg, #0439cab3 0%, #07ebf2b3 100%);
					}

				}

				&:nth-child(4) {
					background: url("~@/assets/image/year-so2.png") no-repeat left center;

					.name {
						background-image: linear-gradient(115deg, #6018d7b3 0%, #9d1fdfb3 100%);
					}

				}

				&:nth-child(5) {
					background: url("~@/assets/image/year-co2.png") no-repeat left center;

					.name {
						background-image: linear-gradient(115deg, #07e7f2b3 0%, #09e5d0b3 47%, #0be2adb3 100%);
					}

				}

				&:nth-child(6) {
					background: url("~@/assets/image/year-all.png") no-repeat left center;

					.name {
						background-image: linear-gradient(115deg, #0439cab3 0%, #07ecf4b3 100%);
					}

				}
			}
		}
	}
}

.actual-right {
	padding-top: 23px;

	width: 500px;
	height: 100%;
	// position: absolute;
	right: 0px;
	top: 0px;
	box-sizing: border-box;

	.one {
		width: 100%;
		margin-bottom: 30px;

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 30px;

			span {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 22px;
				line-height: 1;
				color: #f0f6fb;
			}
		}

		.list {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				width: 125px;
				height: 104px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: flex-end;
				background-size: cover;
				position: relative;

				//margin-left: 20px;
				&:nth-child(1) {
					margin-left: 0px;
					background: url("~@/assets/image/nox.png") no-repeat top center;
					background-size: cover;

					.text {
						background-image: linear-gradient(115deg,
								#40b0f1b3 0%,
								#07e7f3b3 100%);
					}
				}

				&:nth-child(2) {
					background: url("~@/assets/image/pm.png") no-repeat top center;
					background-size: cover;

					.text {
						background-image: linear-gradient(115deg,
								#ff9102b3 0%,
								#ffa701b3 50%,
								#ffbb00b3 100%);
					}
				}

				&:nth-child(3) {
					background: url("~@/assets/image/vocs.png") no-repeat top center;
					background-size: cover;

					.text {
						background-image: linear-gradient(115deg,
								#0439cab3 0%,
								#07ecf4b3 100%);
					}
				}

				&:nth-child(4) {
					background: url("~@/assets/image/so2.png") no-repeat top center;
					background-size: cover;

					.text {
						background-image: linear-gradient(115deg,
								#6018d7b3 0%,
								#9d1fdfb3 100%);
					}
				}

				.top-triangle {
					display: block;
					width: 0px;
					height: 0px;
					border-style: solid;
					border-color: transparent;
					border-width: 6px;
					border-bottom-width: 6px;
					border-bottom-color: #fc6b58;
					position: absolute;
					top: 9px;
					right: 12px;
				}

				.btm-triangle {
					display: block;
					width: 0px;
					height: 0px;
					opacity: 0.3;
					border-style: solid;
					border-color: transparent;
					border-width: 6px;
					border-top-width: 6px;
					border-top-color: #0ce8ac;
					position: absolute;
					top: 9px;
					right: 12px;
					margin-top: 6px;
				}

				.num {
					box-sizing: border-box;
					margin-bottom: 17px;
					width: 100%;
					text-align: center;
					color: #f0f6fb;
					font-size: 22px;
					line-height: 1;
					white-space: nowrap;
					overflow: hidden;

					span {
						margin-left: 4px;
						font-size: 12px;
					}
				}

				.text {
					box-sizing: border-box;
					margin-bottom: 7px;
					width: 100px;
					height: 29px;
					text-align: center;
					color: #f0f6fb;
					font-size: 14px;
					line-height: 29px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border-radius: 2px;
				}
			}
		}
	}
}

.three {
	width: 100%;
	padding-top: 37px;
	box-sizing: border-box;

	.title {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 22px;
		line-height: 1;
		color: #f0f6fb;
		box-sizing: border-box;
		margin-bottom: 30px;
	}

	.pro-list {
		width: 100%;

		.pro-item {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 25px;

			&:last-child {
				margin-bottom: 0px;
			}

			&:nth-child(1) {
				.pro-label {
					.ranking {
						background: url("~@/assets/image/ranking-icon.svg") no-repeat center;
					}

					span {
						opacity: 1;
					}
				}

				.pro {
					::v-deep .el-progress-bar__inner {
						background: linear-gradient(90deg, #1af5c4 0%, #05d3ff 100%);
					}
				}

				.num {
					span {
						opacity: 1;

						&:nth-child(1) {
							color: #08f5dc;
						}
					}
				}
			}

			&:nth-child(2) {
				.pro-label {
					.ranking {
						background: url("~@/assets/image/ranking-icon.svg") no-repeat center;
					}

					span {
						opacity: 1;
					}
				}

				.pro {
					::v-deep .el-progress-bar__inner {
						background: linear-gradient(90deg, #0439ca 0%, #07ecf4 100%);
					}
				}

				.num {
					span {
						opacity: 1;

						&:nth-child(1) {
							color: #17a5f7;
						}
					}
				}
			}

			&:nth-child(3) {
				.pro-label {
					.ranking {
						background: url("~@/assets/image/ranking-icon.svg") no-repeat center;
					}

					span {
						opacity: 1;
					}
				}

				.pro {
					::v-deep .el-progress-bar__inner {
						background: linear-gradient(90deg, #ff6e02 0%, #ffcc00 100%);
					}
				}

				.num {
					span {
						opacity: 1;

						&:nth-child(1) {
							color: #ffc100;
						}
					}
				}
			}

			.pro-label {
				display: flex;
				align-items: center;
				width: 118px;

				.ranking {
					width: 26px;
					height: 26px;
					background-size: contain;
					font-size: 14px;
					color: #e5edf7;
					line-height: 29px;
					text-align: center;
					margin-right: 11px;
				}

				span {
					font-size: 18px;
					line-height: 1;
					color: #e5edf7;
					opacity: 0.4;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.pro {
				width: calc(100% - 230px);

				::v-deep .el-progress-bar {
					width: 315px;
					padding: 0px;
					margin: 0px;
				}

				::v-deep .el-progress-bar__outer {
					border-radius: 0px;
					background: url("~@/assets/image/pro-bg.png") repeat-x center;
					background-size: contain;
				}

				::v-deep .el-progress-bar__inner {
					border: 1px solid #060f2b;
					box-sizing: border-box;
					border-radius: 0px;
					background: linear-gradient(90deg, #2d3e73 0%, #102c86 100%);
				}

				::v-deep .el-progress-bar__inner::after {
					position: absolute;
					top: -2px;
					right: -1px;
					width: 5px;
					height: 18px;
					background: url("~@/assets/image/pro-after.png") no-repeat center;
					background-size: cover;
				}

				::v-deep .el-progress__text {
					width: calc(100% - 315px);
					margin-left: 0px;
					text-align: right;
				}
			}

			.num {
				width: 112px;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				span {
					font-size: 18px;
					opacity: 0.4;

					&:nth-child(1) {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: right;
						color: #e5edf7;
					}

					&:nth-child(2) {
						font-size: 16px;
						line-height: 1;
						color: #e5edf7;
						margin-left: 7px;
					}
				}
			}
		}
	}
}
</style>